<!DOCTYPE >
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

		<style>

			.ctl-container{
				margin-top: 20px;
				margin-bottom: 20px;
			}
			
			.form-group {
				margin-right: 20px;
			}
			
			.topbar {
				text-align: right;
				margin-top: 30px;
			}
			
			td:nth-child(1),th:nth-child(1){
				display: none;
			}
		</style>
	</head>
	<body>

		<div class="container">
		    <div class="topbar">
			
				<!-- Single button -->
				<div class="btn-group">
				  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				    管理 <span class="caret"></span>
				  </button>
				  <ul class="dropdown-menu">
				    <li><a href="/experts">专家信息</a></li>
				    <li><a href="/types">专家属性</a></li>
				    <li><a href="/majors">专业类别</a></li>
				    <li role="separator" class="divider"></li>
				    <li><a href="/logout" class="logout">注销</a></li>
				  </ul>
				</div>
			</div>

			<form class="ctl-container form-inline" name="form1">
				<div class="form-group">
					<label>
						专家类型：
					</label>
					<select id="typelist" name="type" class="form-control">
						<option selected="selected" value="-1">全部</option>
					</select>
				</div>
				<div class="form-group">
					<label>
						抽取人数：</label>
					<input name="limit" type="number" value="10" min="1" max="99999" maxlength="5" required="required" class="form-control" />

				</div>
				<div class="form-group">
					<input type="submit" class="btn btn-primary" value="抽取" />
				</div>
			</form>
			<div class="tbl-container">
				<table class="table table-striped table-bordered table-hover" id="tbl">

				</table>
			</div>

		</div>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="http://all4u.gitee.io/bootstrap-paginator/src/bootstrap-paginator.js" type="text/javascript" charset="utf-8"></script>


		<script type="text/javascript">
			$(function() {
				
							
				var expertTypes;
				var expertMajors;
				
				ready();
				
			
				function ready() {
					$.ajax({
						type: "get",
						url: "/api/experttypes",
						dataType: "json",
						success: function(data) {

							expertTypes = data.content;
							localStorage.setItem('expertTypes', JSON.stringify(expertTypes));
							
							var html =
								`<select id="typelist" name="type" class="form-control">
							<option selected="selected" value="-1">全部</option>
							${
								expertTypes.map(function(t){
									return `<option value="${t.id}">${t.name}</option>`;								
								})
							}
							</select>`;

							$("#typelist").html(html);
						}
					})
					
					$.ajax({
						type: "get",
						url: "/api/expertmajors",
						dataType: "json",
						success: function(data) {
					
							expertMajors = data.content;
							localStorage.setItem('expertMajors', JSON.stringify(expertMajors));
						}
					})
				}
				
				$("form").submit(function(e){				
					list(document.form1.type.value,document.form1.limit.value);
					return false;
				})

				function list(type, limit) {
					$.ajax({
						type: "get",
						url: "/api/experts/random",
						dataType: "json",
						data: {
							type: type,
							limit: limit //随机取limit条数据
						},
						success: function(list) {
							var body =
								`<table class="table table-striped table-bordered table-hover" id="tbl">
							<tr><th>ID</th><th>姓名</th><th>类型</th><th>专业</th><th>性别</th></tr>
							${
								list.map(function(p) {
									//console.log(p)
									return `<tr>
										<td>${p.id}</td>
										<td>${p.name}</td>
										<td>${getObjectName(expertTypes, p.type)}</td>
										<td>${getObjectName(expertMajors, p.major)}</td>
										<td>${p.sex ? '男' : '女'}</td>
									</tr>`								
								}).join("")
							}						
							</table>`;

							$("#tbl").html(body);
						}
					})
				}
				
				function getObjectName(list,id){
					for(var i=0;i<list.length; i++) {
						if(list[i].id == id) {
							return list[i].name;
						}
					}
					return "不明";
				}

			})
		</script>
	</body>
</html>
